<template>
  <div class="app-wrapper">
    <div class="content">
      <div class="title">分包商详情</div>
      <div class="main">
        <el-form auto-complete="on" label-position="left">
          <div class="tab">
            <div class="row">
              <label>分包商名称：</label>
              <div class="detail">{{ createList.subcontractorName }}</div>
            </div>
            <div class="row">
              <label>款项类型：</label>
              <div class="detail">{{ createList.payemntTypeName }}</div>
            </div>
          </div>
          <div class="tab">
            <div class="row">
              <label>付款时间：</label>
              <div class="detail">{{ createList.paymentTime }}</div>
            </div>
            <div class="row">
              <label>付款金额(元)：</label>
              <div class="detail">{{ createList.paymentValue }}</div>
            </div>
          </div>
          <div v-if="downBoolean" class="tab">
            <div class="row">
              <div class="tab">
                <div class="imgtitle row" @click="downFile">
                  <span class="addbtn">付款凭证下载</span>
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </div>
    </div>

  </div>

</template>

<script>
import { getSubcontractorType } from '@/api/subcontractor'
import { detailPayment, getPaymentType } from '@/api/pay'

// import { uploadFiles, deleteFiles } from '@/api/file'
export default {
  name: 'DetailPay',
  components: {

  },
  data() {
    return {
      pathUrl: process.env.VUE_APP_BASE_API,
      createList: {},
      downBoolean: false,
      statueList: [],
      statueCopyList: []
    }
  },
  computed: {

  },
  beforeMount() {
    this.detailData()
    this.payStatus()
  },
  mounted() {
    // this.subcontractorStatus()
  },
  methods: {
    // 获取类型
    async payStatus() {
      const res = await getPaymentType()
      if (res.code === 200) {
        this.statueList = res.data
        if (this.statueList) {
          for (let i = 0; i < this.statueList.length; i++) {
            this.statueCopyList.push({ value: this.statueList[i].id, text: this.statueList[i].name })
          }
        }
      }
    },
    // 获取类型
    async subcontractorStatus() {
      const res = await getSubcontractorType()
      if (res.code === 200) {
        this.typeStatusList = res.data
      }
    },
    // 详情
    async detailData() {
      const id = this.$route.query.id
      const res = await detailPayment(id)
      if (res.code === 200) {
        this.createList = res.data
        if (res.data.linaFiles) {
          this.downBoolean = true
        }
      } else {
        this.$message({
          type: 'error',
          message: res.msg || 'error',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      }
    },
    downFile() {
      const id = this.createList.linaFiles[0].id
      var url = this.pathUrl + '/file/' + id
      window.open(url)
    }
  }
}
</script>

<style lang="scss" scoped>
$color:rgba(247,181,0,1);
  .app-wrapper{
    .content{
      width: 98%;
      min-height: 700px;
      background: rgba(37,38,47,1);
      margin: 20px auto 0 auto;
      .title{
        padding: 30px 0 20px 34px;
        font-size:20px;
        font-weight:500;
        color:rgba(247,181,0,1);
      }
      .main{
        margin: 24px 128px 0 41px;
        padding-bottom: 25px;
        .tab{
          display: flex;
          margin-bottom: 20px;
          .row{
            flex: 1;
            margin-right: 30px;
            .detail{
              font-size:14px;
              font-weight:400;
              color:rgba(255,255,255,0.65);
              display: inline-block;
            }
            .el-form-item{
              width: 350px;
            }
            label{
              font-size:14px;
              font-weight:400;
              color:rgba(247,181,0,0.8);
           }
           .el-input{
              margin: 8px 0 0 0;
           }
           .el-textarea{
             margin: 8px 0 0 0;
             background: transparent;
           }
           .el-select{
              display: block;
              margin: 8px 0 0 0;
           }
           .block{
             margin: 8px 0 0 0;
           }
          }
        }
        .addNode{
          .nodeTitle{
            font-size:14px;
            font-weight:400;
            color:$color;
          }
          .node{
            // display: flex;
            font-size:12px;
            font-weight:400;
            color:$color;
            margin: 0 0 0 97px;
            cursor: pointer;
            .nodePoint{
              width: 12px;
              height: 12px;
              border: 2px solid $color;
              border-radius: 10px;
            }
            .pointbg{
              .circle{
              width: 12px;
              height: 12px;
              background: #252532;
              border-radius: 50px;
              }
              .line{
                width: 1px;
                height: 86px;
                border: 1px solid #F7B500;
                margin: 4px 0 0 3px;
              }
            }
            span{
                margin-left: 10px;
              }
            .infoMsg{
              // display: flex;
              width: 100%;
              .text{
                margin: -100px 0 10px 22px;
                width: 162px;
                height: 95px;
                border-radius: 4px;
                border:1px solid $color;
                .uploadbg{
                  width: 160px;
                  margin: 23px 0 0 0;
                  .upoadtext{
                    margin: 0 auto;
                    margin-top: 12px;
                    display: block;
                  }
                }
              }
              .textarea{
                width: 82%;
                margin: -95px 8px 0 192px;
                float: left;
                line-height: 23px;
                letter-spacing: 1px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                /* text-overflow: ellipsis; */
                -webkit-box-orient: vertical;
              }
              .upimg{
                width:74px;
                height:20px;
                font-size:14px;
                font-weight:400;
                color:$color;
                line-height: 87px;
              }
            }
          }
        }
      }
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #F7B500;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 100%;
    height: 92px;
    display: block;
  }
  .addbtn{
      margin: 10px 0 0 0;
      font-size: 14px;
      font-weight: 400;
      color: rgba(255,255,255,.8);
      cursor: pointer;
      padding: 8px;
      height: 38px;
      text-align: center;
      line-height: 34px;
      background: #F7B500;
    }
</style>
